<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="./css/demo-common.css">
		<link rel="stylesheet" href="./css/atom-one-light.css">
		<script src="./js/jquery-2.2.3.min.js"></script>
		<script src="./js/highlight.pack.js"></script>
		<script src="../js/upload.js"></script>
		<script src="../js/select.js"></script>
		<script src="../js/datetimepicker.js"></script>
		<style>
			input, .input-wrapper {
				width: 200px;
			}
		</style>
	</head>
	<body>
		<h3>Input输入框</h3>
		<h4>基本样式</h4>
		<section>
			<div class="example">
				<div>
					<input type="text" placeholder="普通状态">
					&nbsp;&nbsp;
					<input type="text" value="只读状态" readonly>
					&nbsp;&nbsp;
					<input type="text" value="禁用状态" disabled>
				</div>
				<br>
				<div>
					<input type="text" placeholder="成功状态" class="success">
					&nbsp;&nbsp;
					<input type="text" placeholder="错误状态" class="error">
				</div>
				<br>
				<div>
					<input type="text" class="round" placeholder="圆形">
					&nbsp;&nbsp;
					<input type="text" class="bold" placeholder="粗边框">
				</div>
			</div>
			<pre class="html"><code>
	&lt;input type="text" placeholder="普通状态"&gt;
	&lt;input type="text" placeholder="错误状态" class="error"&gt;
	&lt;input type="text" value="只读状态" readonly&gt;
	&lt;input type="text" value="禁用状态" disabled&gt;
	&lt;input type="text" class="round" placeholder="圆形"&gt;
	&lt;input type="text" class="bold" placeholder="粗边框"&gt;
			</code></pre>
		</section>

		<h4>图标</h4>
		<section>
			<div class="example">
				<p>注意：如果要添加图标，务必使用<mark>.input-wrapper</mark>包裹<mark>&lt;input&gt;</mark>。</p>
				<p>使用类名<mark>.input-left-icon</mark>和<mark>.input-right-icon</mark>标识图标位置。</p>
				<br>
				<span class="input-wrapper">
					<i class="fa fa-user input-left-icon"></i>
					<input type="text" placeholder="用户名">
				</span>
				&nbsp;&nbsp;
				<span class="input-wrapper">
					<i class="fa fa-lock input-left-icon"></i>
					<input type="password" placeholder="密码">
				</span>
				&nbsp;&nbsp;
				<span class="input-wrapper">
					<input type="text" placeholder="出生日期">
					<i class="fa fa-calendar input-right-icon"></i>
				</span>
			</div>
			<pre class="html"><code>
	&lt;span class="input-wrapper"&gt;
		&lt;input type="text" placeholder="用户名"&gt;
		&lt;i class="fa fa-user input-left-icon"&gt;&lt;/i&gt;
	&lt;/span&gt;
	&lt;span class="input-wrapper"&gt;
		&lt;input type="password" placeholder="密码"&gt;
		&lt;i class="fa fa-lock input-left-icon"&gt;&lt;/i&gt;
	&lt;/span&gt;
	&lt;span class="input-wrapper"&gt;
		&lt;input type="text" placeholder="出生日期"&gt;
		&lt;i class="fa fa-calendar input-right-icon"&gt;&lt;/i&gt;
	&lt;/span&gt;
			</code></pre>
		</section>

		<h4>输入框组</h4>
		<section>
			<div class="example">
				<p>注意：不要在输入框组内使用栅格布局。</p>
				<br>
				<div>
					<div class="input-group">
						<input type="text" value="中国" style="width:100px">
						<input type="text" value="北京市" style="width:100px">
						<input type="text" value="海淀区" style="width:120px">
					</div>
					&nbsp;&nbsp;
					<div class="input-group">
						<select id="my-select">
							<option value="http">http://</option>
							<option value="https">https://</option>
						</select>
						<input type="text">
					</div>
				</div>
				<br>
				<h4>带标签</h4>
				<div>
					<div class="input-group">
						<span class="input-label">86</span>
						<input type="text" value="13800000000" style="width:150px">
					</div>
					&nbsp;&nbsp;
					<div class="input-group">
						<input type="text" value="300" style="width:100px">
						<span class="input-label">kg</span>
					</div>
				</div>
				<br>
				<h4>带按钮</h4>
				<div>
					<div class="input-group">
						<input type="text">
						<span class="btn btn-default btn-medium">GO!</span>
					</div>
					&nbsp;&nbsp;
					<div class="input-group">
						<input type="text">
						<span class="btn btn-primary btn-medium">
							<i class="fa fa-search"></i>
							Search
						</span>
					</div>
				</div>
			</div>
			<pre class="html"><code>
	&lt;div class="input-group"&gt;
		&lt;input type="text" value="010" style="width:60px"&gt;
		&lt;input type="text" value="13800000000" style="width:140px"&gt;
	&lt;/div&gt;
	&lt;div class="input-group"&gt;
		&lt;input type="text" value="中国" style="width:120px"&gt;
		&lt;input type="text" value="北京市" style="width:120px"&gt;
		&lt;input type="text" value="海淀区" style="width:120px"&gt;
	&lt;/div&gt;

	&lt;div class="input-group"&gt;
		&lt;span class="input-label"&gt;86&lt;/span&gt;
		&lt;input type="text" value="13800000000" style="width:150px"&gt;
	&lt;/div&gt;
	&lt;div class="input-group"&gt;
		&lt;input type="text" value="300" style="width:100px"&gt;
		&lt;span class="input-label"&gt;kg&lt;/span&gt;
	&lt;/div&gt;

	&lt;div class="input-group"&gt;
		&lt;input type="text"&gt;
		&lt;span class="btn btn-default btn-medium"&gt;GO!&lt;/span&gt;
	&lt;/div&gt;
	&lt;div class="input-group"&gt;
		&lt;input type="text"&gt;
		&lt;span class="btn btn-primary btn-medium"&gt;
			&lt;i class="fa fa-search"&gt;&lt;/i&gt;
			Search
		&lt;/span&gt;
	&lt;/div&gt;
			</code></pre>
		</section>

		<h4>文件上传</h4>
		<section>
			<div class="example">
				<p>如果你想有一个带路径显示的输入框和输入按钮的文件上传组件，你可以使用我们提供的这个结构。</p>
				<br>
				<div class="input-file">
					<span class="btn btn-primary btn-medium">文件</span>
					<span class="file-path-wrapper">
						<input type="text" class="file-path">
					</span>
					<input type="file">
				</div>
			</div>
			<pre class="html"><code>
	&lt;div class="input-file"&gt;
		&lt;span class="btn btn-primary btn-medium"&gt;文件&lt;/span&gt;
		&lt;span class="file-path-wrapper"&gt;
			&lt;input type="text" class="file-path"&gt;
		&lt;/span&gt;
		&lt;input type="file"&gt;
	&lt;/div&gt;
			</code></pre>
			<div class="example" style="border-top: 1px solid #ccc">
				<p>你也可以使用<mark>multiple</mark>属性实现多文件上传。</p>
				<br>
				<div class="input-file">
					<span class="btn btn-primary btn-medium">文件</span>
					<span class="file-path-wrapper">
						<input type="text" class="file-path" placeholder="选择一个或多个文件">
					</span>
					<input type="file" multiple>
				</div>
			</div>
			<pre class="html"><code>
	&lt;div class="input-file"&gt;
		&lt;span class="btn btn-primary btn-medium"&gt;文件&lt;/span&gt;
		&lt;span class="file-path-wrapper"&gt;
			&lt;input type="text" class="file-path" placeholder="选择一个或多个文件"&gt;
		&lt;/span&gt;
		&lt;input type="file" multiple&gt;
	&lt;/div&gt;
			</code></pre>
		</section>

		<h4>文本域</h4>
		<section>
			<div class="example">
				<div>
					<textarea rows="6" cols="40" placeholder="输入一段文字"></textarea>
				</div>
			</div>
			<pre class="html"><code>
	&lt;textarea rows="6" cols="40" placeholder="输入一段文字">&lt;/textarea&gt;
			</code></pre>
		</section>

		<script>
			$(document).ready(function() {
			$('pre code').each(function(i, block) {
			 	hljs.highlightBlock(block);
			});
			});
			$('#my-select').select();
			$('#date').datetimepicker();
		</script>
	</body>
</html>